<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
    <link rel="stylesheet" href="/plugin/layui/css/layui.css">
</head>
<body>

<!--
    layui-form                              标识表单元素块
    layui-form-item                         标识行区块结构
    layui-form-label                        标题  <label标签使用>
    layui-input-block                       一个行块   block -- inline  块变短 占据部分宽度
    输入框
        layui-input                         <input标签使用> 渲染成相应格式
        required                            <input标签使用> 变成必填项   提交时会提示“请填写字段”
        autocomplete="off"                  <input标签使用> 自动填充
        lay-verify="required"               <input标签使用> lay-verify: 注册form模块需要验证的类型    required提交时会弹出样式“必填项不为能为空” 还可选择手机等
    下拉框
        selected                            默认选中该值
        disabled                            禁用  可用在<select>标签和<option>标签
        optgroup                            下拉框分组
        lay-search                          开启搜索
    复选框
        <input type="checkbox">             复选框标签
        lay-skin="primary"                  原始效果
        checked                             默认被选中
        disabled                            同上
    开关
        checkbox的lay-skin="switch"         开关样式
        lay-text="on|off"                   开关文本显示
        checked                             同上
        disabled                            同上
    单选
        <input type="radio">                name分类
    文本域
        <textarea class="layui-textarea">   与输入框类似
    组装表单
        layui-inline layui-input-inline
    忽略layui效果
        lay-ignore
    方框风格
        layui-form-pane         卸载form标签中
        pane属性  在item中添加    复选框/开关/单选框 这些组合在该风格下需要额外添加


-->

<!--表单-->
<form class="layui-form layui-form-pane">

    <!--输入框-->
    <div class="layui-form-item">
        <label class="layui-form-label">标题</label>
        <div class="layui-input-inline">
            <input type="text" name="title" placeholder="请输入标题" lay-verify="required" class="layui-input"/>
            <!--lay-verify="required"-->
        </div>
    </div>

    <!--下拉框-->
    <div class="layui-form-item">
        <label class="layui-form-label">城市</label>
        <div class="layui-input-inline">
            <select name="city" lay-verify="required">
                <option value="">请选择一个城市</option>
                <option value="010" selected>北京</option>
                <option value="021">上海</option>
                <option value="0571">杭州</option>
            </select>
        </div>
    </div>

    <!--下拉框 分组+搜索-->
    <div class="layui-form-item">
        <label class="layui-form-label">问题</label>
        <div class="layui-input-inline">
            <select name="quiz" lay-search>
                <option value="">请选择</option>
                <optgroup label="城市记忆">
                    <option value="你工作的第一个城市">你工作的第一个城市？</option>
                </optgroup>
                <optgroup label="学生时代">
                    <option value="你的工号">你的工号？</option>
                    <option value="你最喜欢的老师">你最喜欢的老师？</option>
                </optgroup>
            </select>
        </div>
    </div>

    <!--复选框-->
    <div class="layui-form-item" pane>
        <label class="layui-form-label">爱好</label>
        <div class="layui-input-block">
            <!--默认效果-->
            <input type="checkbox" name="hobby1" title="唱歌"/>
            <input type="checkbox" name="hobby2" title="跳舞"/>
            <input type="checkbox" name="hobby3" title="读书"/>
            <br/>
            <!--原始效果-->
            <input type="checkbox" lay-skin="primary" checked name="hobby" title="唱歌" value="sing"/>
            <input type="checkbox" lay-skin="primary" disabled name="hobby" title="跳舞" value="dance"/>
            <input type="checkbox" lay-skin="primary" name="hobby" title="读书" value="read"/>

        </div>
    </div >

    <!--开关-->
    <div class="layui-form-item" pane>
        <label class="layui-form-label">开关</label>
        <div class="layui-input-block">
            <input type="checkbox" lay-skin="switch" name="switch0"/>
            <input type="checkbox" lay-skin="switch" name="switch1" lay-text="开|关"/>
        </div>
    </div>

    <!--单选框-->
    <div class="layui-form-item" pane>
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <input type="radio" name="radio" title="男" value="0"/>
            <input type="radio" name="radio" title="女" value="1"/>
        </div>
    </div>

    <!--文本域-->
    <div class="layui-form-item">
        <label class="layui-form-label">自我介绍</label>
        <div class="layui-input-block">
            <textarea name="info" lay-verify="required" placeholder="请输入自我介绍" class="layui-textarea"></textarea>
        </div>
    </div>
    <!--表单组装-->
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">范围</label>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid">-</div>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">自我介绍</label>
            <div class="layui-input-inline">
                <input type="text" name="book" class="layui-input"/>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">选择</label>
            <div class="layui-input-inline">
                <input type="radio" name="radio1" title="1"  />
                <input type="radio" name="radio1" title="2"  />
            </div>
        </div>

    </div>




    <!--按钮-->
    <div class="layui-form-item">
        <div class="layui-input-inline">
            <button type="submit" class="layui-btn layui-btn-warm layui-btn-lg layui-btn-radius" lay-submit>提交</button>
            <!--lay-submit 验证-->
            <button type="reset" class="layui-btn layui-btn-warm layui-btn-lg layui-btn-radius">重置</button>
        </div>
    </div>
</form>


<script src="/plugin/layui/layui.js"></script>
<script type="text/javascript">
    layui.use(['form', 'element'], function () {
        var form = layui.form;
        var element = layui.element;
    })
</script>

</body>
</html>